.app {
  --color-bg: color(srgb 0 0 0);
  --color-text: color(srgb 1 1 1);
  --app-height: calc(100vh - var(--header-height, var(--base-space-16)));
  --toolbar-size: 2rem;

  background-color: var(--color-bg);
  color: var(--color-text);
  color-scheme: dark;
  display: grid;
  font-family: inherit;
  font-size: 100%;
  grid-template-areas: "nav editor resolver-result";
  grid-template-columns: minmax(20vw, 20rem) 1fr 1fr;
  font-variant-numeric: tabular-nums;
  min-height: 24rem;
  height: var(--app-height);
  line-height: 1;
  letter-spacing: 0;
  margin: 0;
  max-width: 100vw;
  overflow: hidden;
  width: 100%;

  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    margin-block: 0;
  }
}

.loading {
  display: flex;
  inset: auto;
  padding: var(--page-padding-x);
}

.nav {
  border-right: 1px solid #444;
  display: flex;
  grid-area: nav;
  flex-direction: column;
}

.editor {
  grid-area: editor;
  border-right: 1px solid #444;
}

.editorError {
  background-color: color(srgb 0.5 0 0);
  color: color(srgb 0.9 0.9 0.9);
  font-family: monospace;
  font-size: var(--font-size-xs);
  padding: var(--base-space-2);
}

.fileList {
  border-top: 1px solid #444;
  display: flex;
  height: calc(var(--app-height) - var(--toolbar-size));
  overflow: auto;
}

.resolverResult {
  grid-area: resolver-result;
}
